<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {

            width: 500px;
            height: 220px;
            background-color: #00a1cc;
            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;
            position: relative;
        }

        #btns {
            position: absolute;
            width:500px;
            top:50%;
            left:0;
            display:none;

        }
    </style>
</head>
<body>
<div style="position: relative">
    <div id="box" class="box">
        <div style="width: 9999px;">
            <div style="float: left">
                <img src="image/1.jpg" height="220">
                <img src="image/2.png" height="220">
                <img src="image/3.jpg" height="220">
                <img src="image/4.jpg" height="220">
                <img src="image/5.jpg" height="220">
            </div>
        </div>
    </div>
    <div id="btns">
        <input type="button" id="btnLeft" value="<" style="float:left;">
        <input type="button" id="btnRight" value=">"  style="float:right;">
    </div>
</div>


<input type="button" id="speedPlus" value="速度加">
<script>
    var box = document.getElementById('box');
    var box2 = document.getElementById('box2');
    var btns = document.getElementById('btns');
    var speedPlus = document.getElementById('speedPlus');

    function maquee(idstr,dir,options){
        if (!options){
            options = {}
        }

        var box = document.getElementById(idstr);
        var speedStep=0;
        var findObj = box.children[0].children[0];
        var willInsertObj = box.children[0];
        willInsertObj.appendChild(findObj.cloneNode(true))

        box.onmouseover = function(){
            clearInterval(t);
        }

        box.onmouseout = function(){
            t = setInterval(move,5);
        }


        if (options.speedPlus){
            document.getElementById(options.speedPlus).onclick = function(){
                console.log(step)
                console.log(speedStep)
                if (step>0){
                    speedStep++;
                } else {
                    speedStep--;
                }
            }
        }

        //console.log(btns);
//        btns.children[0].onclick = function(){
//            clearInterval(t);
//            maquee(box,'left',btns);
//        }
        var btns;
        if (btns = document.getElementById(options.btns)){
            btns.style.display = 'block'
            btns.children[0].onclick = function(){
                dir = 'left'
            }
            btns.children[1].onclick = function(){
                dir = 'right'
            }
        }

        function move(){
            var condition,startPosition,attrName,attrNameSize;
            switch (dir){
                case "left":
                    attrName = 'scrollLeft';
                    attrNameSize = 'scrollWidth';
                    step = speedStep+1;
                    condition = (box[attrName] >= box[attrNameSize]/2);
                    startPosition = 0;
                    break;
                case "right":
                    attrName = 'scrollLeft'
                    attrNameSize = 'scrollWidth';
                    step = speedStep-1;
                    condition = (box[attrName] == 0);
                    startPosition =  box[attrNameSize]/2;
                    break;
                case 'up':
                    attrName = 'scrollTop'
                    attrNameSize = 'scrollHeight';
                    step = speedStep+1;
                    condition = (box[attrName] >= box[attrNameSize]/2);
                    startPosition = 0;
                    break;
                case 'down':
                    attrName = 'scrollTop'
                    attrNameSize = 'scrollHeight';
                    step = speedStep-1;
                    condition = (box[attrName] == 0);
                    startPosition =  box[attrNameSize]/2;
                    break;

            }

            if (condition){
                box[attrName] = startPosition;
            } else {
                box[attrName] =   box[attrName] + step;
            }

        }
        var t = setInterval(move,5);
    }

    var options = {
        btns:'btns',
        speedPlus:'speedPlus'
    }
    maquee('box','right',options);
</script>
</body>
</html>